<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>猜数字游戏</h1>
    <div class="form">
        <label for="guessField">请猜数：</label>
        <input type="text" id="guessField" class="guessField">
        <input type="submit" value="确定" class="guessSubmit">
    </div>

    <div class="resultParas">
        <p class="guesses"></p>
        <p class="lastResult"></p>
        <p class="lowOrHigh"></p>
    </div>
</body>

<ml>

    <script>
        let randomNumber = Math.floor(Math.random() * 100) + 1;
        const guesses = document.querySelector('.guesses');
        const lastResult = document.querySelector('.lastResult');
        const lowOrHigh = document.querySelector('.lowOrHigh');
        const guessSubmit = document.querySelector('.guessSubmit');
        const guessField = document.querySelector('.guessField');
        let guessCount = 1;

        let resetButton;

        function checkGuess() {
            let userGuess = Number(guessField.value);
            if (guessCount === 1) {
                guesses.textContent = '上次猜的数：';
            }
            guesses.textContent += userGuess + ' ';
            if (userGuess === randomNumber) {
                lastResult.textContent = '恭喜你，猜对了！';
                lastResult.style.backgroundColor = 'green';
                lowOrHigh.textContent = ' ';
                setGameOver();
            } else if (guessCount === 10) {
                lastResult.textContent = '游戏结束';
                setGameOver();
            } else {
                lastResult.textContent = '猜错了';
                lastResult.style.backgroundColor = 'red';
                if (userGuess < randomNumber) {
                    lowOrHigh.textContent = '猜低了'
                } else if (userGuess > randomNumber) {
                    lowOrHigh.textContent = '猜高了'
                }
            }
            guessCount++;
            guessField.value = '';
            guessField.focus();
        }
        guessSubmit.addEventListener('click', checkGuess);

        function setGameOver() {
            guessField.disabled = true;
            guessSubmit.disabled = true;
            resetButton = document.createElement('button');
            resetButton.textContent = '开始新游戏';
            document.body.appendChild(resetButton);
            resetButton.addEventListener('click', resetGame);
        }

        function resetGame() {
            guessCount = 1;
            const resetParas = document.querySelectorAll('.resultParas p');
            for (let i = 0; i < resetParas.length; i++) {
                resetParas[i].textContent = '';
            }
            resetButton.parentNode.removeChild(resetButton);
            guessField.disabled = false;
            guessSubmit.disabled = false;
            guessField.value = '';
            guessField.focus();
            lastResult.style.backgroundColor = 'white';
            randomNumber = Math.floor(Math.random() * 100) + 1
        }
    </script>